.page {
  background: #f5f6f7;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  padding: 24rpx;
  box-sizing: border-box;
}

.ad-wrapper {
  margin-bottom: 24rpx;
  min-height: 160rpx;
}

.ad-placeholder {
  height: 160rpx;
  border-radius: 16rpx;
  background: #fffbe6;
  color: #b58b00;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}

.ad-placeholder.error {
  background: #fff1f0;
  color: #cf1322;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 12rpx;
  background: #fff7e6;
  border-radius: 16rpx;
  padding: 20rpx 24rpx;
  color: #ad6800;
  font-size: 26rpx;
  margin-bottom: 24rpx;
}

.notice-icon {
  font-size: 32rpx;
}

.result-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.04);
}

.line-row {
  display: flex;
  align-items: flex-start;
  gap: 12rpx;
  margin-bottom: 16rpx;
}

.line-row:last-of-type {
  margin-bottom: 0;
}

.line-checkbox {
  width: 48rpx;
  height: 48rpx;
  border-radius: 12rpx;
  border: 2rpx solid #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.line-checkbox.checked {
  background: #8bc34a;
  border-color: #8bc34a;
  color: #fff;
}

.checkbox-icon {
  font-size: 28rpx;
}

.line {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  font-size: 28rpx;
  color: #333;
}

.segment-text {
  white-space: pre-wrap;
}

.number-chip {
  min-width: 44rpx;
  padding: 8rpx 12rpx;
  border-radius: 12rpx;
  text-align: center;
  font-weight: 500;
  background: #f2f3f5;
  color: #333;
}

.number-chip.yellow {
  background: #ffe066;
}

.number-chip.red {
  background: #ff6b6b;
  color: #fff;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 16rpx 24rpx;
  background: #ffffff;
  box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.05);
}

.toolbar.secondary {
  padding-top: 8rpx;
  flex-direction: column; /* stack rows vertically */
  align-items: stretch;
  gap: 12rpx;
}
.toolbar.secondary .row { display: flex; gap: 16rpx; width: 100%; }
.toolbar.secondary .row .btn { flex: 1; }

.mode-switch {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #fff;
  border: 2rpx solid #8bc34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  color: #4caf50;
}

.delta-input {
  flex: 1;
  height: 80rpx;
  border-radius: 12rpx;
  border: 2rpx solid #d9d9d9;
  padding: 0 24rpx;
  box-sizing: border-box;
  font-size: 30rpx;
}

.delta-picker {
  flex: 1;
  height: 80rpx;
  border-radius: 12rpx;
  border: 2rpx solid #d9d9d9;
  background: #fff;
  font-size: 30rpx;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  height: 80rpx;
  border-radius: 12rpx;
  background: #f0f0f0;
  border: none;
  color: #333;
  font-size: 28rpx;
}

.btn.apply {
  flex: 1;
  background: #8bc34a;
  color: #fff;
}

.btn.danger {
  /* 使用默认背景，强调文字颜色 */
  background: #f0f0f0;
  color: #D97706;
}

.btn.apply-red {
  background: #E53935;
  color: #fff;
}

.btn.apply-yellow {
  background: #F59E0B;
  color: #fff;
}

.btn.modify.yellow {
  background: #ffe066;
  color: #fff;
}

.btn.modify.red {
  background: #ff6b6b;
  color: #fff;
}

/* 选择数值弹窗 */
.delta-modal-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.delta-modal {
  width: 86vw;
  max-width: 680rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 24rpx;
  box-sizing: border-box;
}

.delta-title {
  text-align: center;
  font-size: 30rpx;
  font-weight: 600;
  margin-bottom: 16rpx;
}

.delta-grid {
  display: grid;
  /* 自适应列数：每项最小 160rpx，空间足够时自动排更多列 */
  grid-template-columns: repeat(auto-fit, minmax(160rpx, 1fr));
  gap: 16rpx;
}

.delta-item {
  height: 80rpx;
  border-radius: 12rpx;
  background: #f2f3f5;
  color: #333;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 32rpx;
  font-weight: 600;
}

.delta-item.active {
  background: #8bc34a;
  color: #fff;
}

.delta-custom {
  display: flex;
  gap: 16rpx;
  margin-top: 16rpx;
}

.delta-custom-input {
  flex: 1;
  height: 72rpx;
  border-radius: 12rpx;
  border: 2rpx solid #d9d9d9;
  padding: 0 20rpx;
}

.btn.close {
  width: 100%;
  margin-top: 16rpx;
  background: #7a8899;
  color: #fff;
}

/* 移除底部说明小字（不再展示） */
.safe-top-spacer {
  height: 40rpx; /* 顶部留白，避免桌面端点击到窗口边框 */
}
